<main>
	<header>
		<div class="toolbar">
			<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
			<div class="header-title">tabs标签页</div>
			<a class="bar-button" data-href="tpl/iframe_page.html?dwz_callback=biz.iframeRender&page_title=tabs文档&page_url=https://dwzteam.github.io/dwz_mobile_doc_v1/#/doc/h5/widget/tabs" target="navView" rel="doc"><i class="dwz-icon-document"></i>文档</a>
		</div>
	</header>

	<section>

		<div class="w-tabbar dwz-tabs full-size">
			<div class="tab-bar">
				<a class="tab-item"><span>tab1</span></a>
				<a class="tab-item"><span>tab2</span></a>
				<a class="tab-item"><span>tab3</span></a>
			</div>
			<div class="tab-panel flex-wrap-v">
				<div class="panel-item flex-1">
					<article>内容1</article>
				</div>
				<div class="panel-item flex-1">
					<article>内容2</article>
				</div>

				<div class="panel-item flex-1">

					<div class="dwz-slide-tab full-abs">
						<div class="hd">
							<ul>
								<li>标题1</li>
								<li>标题2</li>
								<li>标题3</li>
								<li>标题4</li>
								<li>标题5</li>
								<li>标题6</li>
								<li>标题7</li>
								<li>标题8</li>
								<li>标题9</li>
								<li>标题10</li>
							</ul>
						</div>
						<div class="bd">
							<ul>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容1
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容2
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容3
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容4
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容5
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容6
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容7
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容8
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容9
										</div>
									</div>
								</li>
								<li>
									<div class="scroll-content dwz-scroll">
										<div class="scroll">
											内容10
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
		</div>

	</section>

</main>


<script type="text/javascript">
	function helper(tpl, params) {
		// console.log(this, tpl, params)

		this.find('.dwz-tabs').onActivated((event) => {
			console.log(event.data);
		});

		this.find('.dwz-slide-tab').slideTab({
			onSwitchSlide: ($itemBox, itemTpl, itemParams) => {
				console.log($itemBox, itemTpl, itemParams);
			}
		})

	}
</script>